<template>
  <div class="info">
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />

    <div class="count_box">
      <van-cell is-link title="泡泡" @click="show = true">
        <div class="img">
          <img :src="userInfo.avatar" alt="" />
        </div>
      </van-cell>
      <van-action-sheet v-model="show" @select="onSelect">
        <ul class="showImg">
          <li>拍照</li>
          <li>
            <van-uploader :after-read="afterRead">
              <span>从相册选择</span>
            </van-uploader>
          </li>
          <li @click="showImg = false">取消</li>
        </ul>
      </van-action-sheet>

      <van-cell is-link title="片名" @click="goInfoName(userInfo.nickname)">{{
        userInfo.nickname
      }}</van-cell>

      <van-cell title="手机号">{{ userInfo.mobile }}</van-cell>

      <van-cell is-link title="性别" @click="goInfo(userInfo.sex)">
        <span v-if="userInfo.sex == 0">男</span>
        <span v-if="userInfo.sex == 1">女</span>
        <span v-if="userInfo.sex == 3">保密</span>
      </van-cell>

      <van-cell is-link title="出生日期" @click="dateshow = true">{{
        userInfo.birthday
      }}</van-cell>
      <van-action-sheet v-model="dateshow">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="timebtn"
        />
      </van-action-sheet>

      <van-cell
        class="cityTitle"
        is-link
        title="所在城市"
        @click="showcity = true"
      >
        <span>{{ userInfo.province_name }}</span>
        <span>{{ userInfo.city_name }}</span>
        <span>{{ userInfo.district_name }}</span>
      </van-cell>
      <van-action-sheet v-model="showcity">
        <van-area
          title="标题"
          ref="area"
          :area-list="areaList"
          @confirm="citybtn"
        />
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import { getUserInfo, updataInfo, updataImg } from "../request/http";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      areaList,
      show: false,
      dateshow: false,
      showcity: false,
      cityData: "",
      actions: [
        { name: "极限", id: 0 },
        { name: "从手机相册选择", id: 1 },
        { name: "取消", id: 2 },
      ],
      userInfo: [],
      minDate: new Date(1920, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      getUserInfo().then((res) => {
        console.log(res);
        this.userInfo = res.data.data;
      });
      // L;
      // this.$refs.area.reset();
      // {code: "140000"}
      // {
      //   code: "140100",
      // },
      // {
      //   code: "140105",
      // }
    },
    onClickLeft() {
      this.$router.push('/my');
    },
    onSelect(item) {
      this.show = false;
      this.$toast(item.name);
    },
    citybtn(columnsNum) {
      console.log(columnsNum);
      this.upInfo({
        province_id: columnsNum[0].code,
        city_id: columnsNum[1].code,
        district_id: columnsNum[2].code,
      });
      this.showcity = false;
      getUserInfo().then((res) => {
        console.log(res);
        this.userInfo = res.data.data;
      });
    },

    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      }
      return val;
    },

    timebtn(value) {
      console.log(123);
      console.log(value);

      var seperator1 = "-";
      var month = value.getMonth() + 1;
      var strDate = value.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var birthday =
        value.getFullYear() + seperator1 + month + seperator1 + strDate;
      this.upInfo({
        birthday: birthday,
      });
      this.dateshow = false;
      getUserInfo().then((res) => {
        console.log(res);
        this.userInfo = res.data.data;
      });
    },
    upInfo(data) {
      updataInfo(data).then((res) => {
        console.log(res);
      });
    },
    goInfo(data) {
      this.$router.push({
        path: "/infoupdata",
        query: {
          data: data,
        },
      });
    },
    goInfoName(data) {
      this.$router.push({
        path: "/infoupdataName",
        query: {
          data: data,
        },
      });
    },
    afterRead({ file }) {
      console.log(file);
      let formdata = new FormData();
      formdata.append("file", file);
      updataImg(formdata).then((res) => {
        console.log(res);
        this.upInfo({ avatar: res.data.data.path });
        this.show = false;
        setTimeout(() => {
          getUserInfo().then((res) => {
            console.log(res);
            this.userInfo = res.data.data;
          });
        }, 0);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.img {
  img {
    width: 1.067rem;
    height: 1.067rem;
    border-radius: 50%;
    vertical-align: middle;
  }
}
.cityTitle {
  span {
    margin-left: 20px;
  }
}
.showImg {
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  height: 100%;
  li {
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }
}
</style>